/*
@description 描述: 时光轴
@author ZhaoliangJi
@time2021-11-17 17:27:39
*/
<template>
  <div id="timeline">
    <ul>
      <li
        v-for="(item, index) in $store.state.TsinghuaId"
        @click="AnchorPoint(index)"
        :class="{ active: $store.state.currentIndex === index }"
        :key="index"
      >
        <transition name="list">
          <div class="list-icon" v-if="$store.state.currentIndex === index">
            •
          </div>
        </transition>
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: "ds-cloud-0",
    };
  },
  // watch
  methods: {
    //锚点跳转
    AnchorPoint(index) {
      this.$store._mutations.CURRENT_INDEX[0](index);
      this.$store._actions.AnchorpointSearch[0](index);
    },
  },
};
</script>

<style scoped>
ul {
  padding: 0px 14px;
  border-left: 2px solid #ccc;
  margin: 20px 70px;
}

.list-icon {
  position: absolute;
  left: -21px;
  top: -6px;
  font-size: 27px;
}
li {
  padding: 6px 0;
  margin-top: 20px;
  position: relative;
  padding: 4px 0;
  display: table;
  cursor: pointer;
  font-family: Lato, sans-serif;
  color: rgb(119, 118, 118);
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.5s;
}
li::after {
  position: absolute;
  content: "";
  top: 100%;
  left: 0;
  width: 100%;
  height: 3px;
  background: #3498db;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s;
}

li:hover {
  color: #118bfd;
}

li:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.active {
  color: #118bfd;
}

.list-enter-to {
  transition: all 1s ease;
  transform: translateY(0);
}

/*上一个元素消失的动画*/
.list-leave-active {
  transition: all 1s ease;
  opacity: 0;
  transform: translateY(-100%);
}

/*下一个元素进入的动画效果*/
.list-enter {
  transform: translateY(-100%);
}

.list-leave {
  transform: translateY(0);
}
</style>